<template>
	<view class="container-wrapper">
		<view :style="{ height: statusBarHeight + 'px', backgroundColor: '#fff' }"></view>
		<!-- <uni-nav-bar title="导航栏组件"  right-icon="cart" ></uni-nav-bar> -->
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ height: navbarHeight + 'px' }">
			<!-- 左侧返回按钮 -->
			<view class="navbar-left" @click="goBack">
				<slot name="left">
					<uni-icons v-if="showBack" type="left" size="22"></uni-icons>
				</slot>
			</view>

			<!-- 中间标题区域 -->
			<view class="navbar-center">
				<slot name="center">
					<text class="navbar-title">{{ title }}</text>
				</slot>
			</view>

			<!-- 右侧操作区域 -->
			<view ref="navbarRight" class="navbar-right" :style="[computedRight]">
				<slot name="right"></slot>
			</view>
		</view>
		<view class="page-content" :style="{ height: windowHeight - navbarHeight - statusBarHeight + 'px', padding: pagePath === 'apply' ? '0px' : '8px' }">
			<slot></slot>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				:type="msgType"
				cancelText="再想想"
				confirmText="去登录"
				title="通知"
				content="请登录后使用完整功能"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'CustomContainer',
	components: {
		//uni-popup
	},
	data() {
		return {
			navbarHeight: 44, // 自定义导航栏高度，默认44px
			statusBarHeight: 0, // 状态栏高度
			windowHeight: 0, // 可使用窗口高度
			menuButtonLeft: 336,
			windowWidth: 0,
			type: 'center',
			msgType: 'success',
			messageText: '这是一条成功提示',
			value: ''
		};
	},
	props: {
		pagePath: {
			default: 'home'
		},
		// 标题
		title: {
			type: String,
			default: ''
		},
		// 标题颜色
		titleColor: {
			type: String,
			default: '#000000'
		},
		// 是否显示返回文字
		showBackText: {
			type: Boolean,
			default: false
		},
		// 返回按钮文字
		backText: {
			type: String,
			default: '返回'
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		computedRight() {
			return {
				right: `${this.windowWidth - this.menuButtonLeft + 10}px`
			};
		}
	},
	activated() {
		this.watchPagePath();
	},
	mounted() {
		this.getStatusBarHeight();
		this.watchPagePath();
	},
	methods: {
		watchPagePath() {
			const token = uni.getStorageSync('token');
			if (!token) {
				if (this.pagePath !== 'home' && this.pagePath !== 'apply') {
					this.$refs.alertDialog.open();
				}
			}
		},

		getStatusBarHeight() {
			const systemInfo = uni?.getWindowInfo();
			const menuButtonInfo = uni?.getMenuButtonBoundingClientRect();
			const { statusBarHeight, windowHeight, windowWidth } = systemInfo || {};
			const { left, height, top } = menuButtonInfo || {};
			this.statusBarHeight = statusBarHeight || 0;
			this.windowHeight = windowHeight || 0;
			this.windowWidth = windowWidth || 0;
			this.menuButtonLeft = left || 336;
			this.navbarHeight = menuButtonInfo ? height + (top - statusBarHeight) * 2 : 44;
		},

		dialogConfirm() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},

		dialogClose() {
			uni.switchTab({
				url: '/pages/home/home'
			});
		},
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1,
				fail: () => {
					// 如果无法返回，则返回首页
					uni.switchTab({
						url: '/pages/index/index',
						fail: () => {
							console.warn('无法返回上一页，也未能跳转到首页');
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.container-wrapper {
	width: 100%;

	/* box-sizing: border-box;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #f5f5f5; */
	.custom-navbar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		position: relative;
		.navbar-left {
			position: absolute;
			left: 10px;
		}
		.navbar-right {
			position: absolute;
			//left: 337px;
		}
	}
	.page-content {
		box-sizing: border-box;
		// padding: 8px;
		overflow: hidden;
		background-color: #f5f5f5;
	}
}
</style>
